<template>
  <a-card :bordered="false" class="card-area">
    <div v-if="clusterFlag" style="width: 100%;margin-top: 1rem">
      <a-row :gutter="8">
        <a-divider orientation="left">Redis 集群信息</a-divider>
        <table style="border-bottom: 1px solid #f1f1f1;">
          <tr v-for="(info, index) in redisInfo" :key="index" style="border-top: 1px solid #f1f1f1;">
            <td style="padding: .7rem 1rem">{{info.key}}</td>
            <td style="padding: .7rem 1rem">{{info.description}}</td>
            <td style="padding: .7rem 1rem">{{info.value}}</td>
          </tr>
        </table>
      </a-row>
      <a-row v-for="(node,index) in clusterNodes" :key="index" :gutter="8">
        <a-divider orientation="left">Redis 集群节点[{{node.id}}]
          <a-button @click="viewNode(node.id,node.host,node.port)">查看节点详情</a-button>
        </a-divider>
        <table style="border-bottom: 1px solid #f1f1f1;">
          <tr style="border-top: 1px solid #f1f1f1;">
            <td style="padding: .7rem 1rem">id:</td>
            <td style="padding: .7rem 1rem">{{node.id}}</td>
            <td style="padding: .7rem 1rem">name:</td>
            <td style="padding: .7rem 1rem">{{node.name}}</td>
          </tr>
          <tr style="border-top: 1px solid #f1f1f1;">
            <td style="padding: .7rem 1rem">host:</td>
            <td style="padding: .7rem 1rem">{{node.host}}</td>
            <td style="padding: .7rem 1rem">port:</td>
            <td style="padding: .7rem 1rem">{{node.port}}</td>
          </tr>
          <tr style="border-top: 1px solid #f1f1f1;">
            <td style="padding: .7rem 1rem">linkState:</td>
            <td style="padding: .7rem 1rem">{{node.linkState}}</td>
            <td style="padding: .7rem 1rem">type:</td>
            <td style="padding: .7rem 1rem">{{node.type}}</td>
          </tr>
          <tr style="border-top: 1px solid #f1f1f1;">
            <td style="padding: .7rem 1rem">masterId:</td>
            <td style="padding: .7rem 1rem">{{node.masterId}}</td>
            <td style="padding: .7rem 1rem"></td>
            <td style="padding: .7rem 1rem"></td>
          </tr>
        </table>
      </a-row>
    </div>
    <div v-else style="width: 100%;margin-top: 1rem">
      <a-row :gutter="8">
        <a-col :span="12">
          <apexchart ref="memoryInfo" type=area height=350 :options="memory.chartOptions" :series="memory.series"/>
        </a-col>
        <a-col :span="12">
          <apexchart ref="keySize" type=area height=350 :options="key.chartOptions" :series="key.series"/>
        </a-col>
      </a-row>
      <a-row :gutter="8">
        <a-divider orientation="left">Redis详细信息</a-divider>
        <table style="border-bottom: 1px solid #f1f1f1;">
          <tr v-for="(info, index) in redisInfo" :key="index" style="border-top: 1px solid #f1f1f1;">
            <td style="padding: .7rem 1rem">{{info.key}}</td>
            <td style="padding: .7rem 1rem">{{info.description}}</td>
            <td style="padding: .7rem 1rem">{{info.value}}</td>
          </tr>
        </table>
      </a-row>
    </div>

    <!-- 集群节点 详情 -->
    <redisClusterNode
      ref="redisClusterNode"
      :redisClusterNodeInfoVisiable="redisClusterNodeInfo.visiable"
      :nodeId="redisClusterNodeInfo.nodeId"
      :host="redisClusterNodeInfo.host"
      :port="redisClusterNodeInfo.port"
      @close="handleRedisClusterNodeInfoClose"
    >
    </redisClusterNode>
  </a-card>
</template>
<script>
    import RedisClusterNode from './RedisClusterNodeInfo'
    import axios from 'axios'
    import moment from 'moment'

    export default {
        name: 'RedisInfo',
        components:{RedisClusterNode},
        data() {
            return {
                loading: true,
                memory: {
                    series: [],
                    chartOptions: {
                        chart: {
                            animations: {
                                enabled: true,
                                easing: 'linear',
                                dynamicAnimation: {
                                    enabled: true,
                                    speed: 3000
                                }
                            },
                            toolbar: {
                                show: false
                            },
                            zoom: {
                                enabled: false
                            }
                        },
                        dataLabels: {
                            enabled: false
                        },
                        stroke: {
                            show: true,
                            curve: 'smooth'
                        },
                        title: {
                            text: 'Redis内存实时占用情况（kb）',
                            align: 'left'
                        },
                        markers: {
                            size: 0
                        },
                        xaxis: {},
                        yaxis: {},
                        legend: {
                            show: false
                        }
                    },
                    data: [],
                    xdata: []
                },
                key: {
                    series: [],
                    chartOptions: {
                        chart: {
                            animations: {
                                enabled: true,
                                easing: 'linear',
                                dynamicAnimation: {
                                    show: true,
                                    speed: 3000
                                }
                            },
                            toolbar: {
                                show: false
                            },
                            zoom: {
                                enabled: false
                            }
                        },
                        dataLabels: {
                            enabled: false
                        },
                        colors: ['#f5564e'],
                        stroke: {
                            show: true,
                            curve: 'smooth'
                        },
                        title: {
                            text: 'Redis key实时数量（个）',
                            align: 'left'
                        },
                        markers: {
                            size: 0
                        },
                        xaxis: {},
                        yaxis: {},
                        legend: {
                            show: false
                        }
                    },
                    data: [],
                    xdata: []
                },
                redisInfo: [],
                clusterFlag: false,
                clusterNodes: [],
                timer: null,
                redisClusterNodeInfo: {
                    visiable: false,
                    data: {},
                    host: "",
                    port: 0,
                    nodeId: ""
                },
            }
        },
        beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer)
            }
        },
        mounted() {
            let minMemory = 1e10
            let minSize = 1e10
            let maxMemory = -1e10
            let maxSize = -1e10
            this.$get('redis/info').then((r) => {
                this.clusterFlag = r.data.data.clusterFlag;
                this.redisInfo = r.data.data.redisInfo;
                if (this.clusterFlag) {
                    this.clusterNodes = r.data.data.clusterNodes;
                } else {
                    this.timer = setInterval(() => {
                        if (this.$route.path.indexOf('redis') !== -1) {
                            axios.all([
                                this.$get('redis/keysSize'),
                                this.$get('redis/memoryInfo')
                            ]).then((r) => {
                                let currentMemory = r[1].data.used_memory / 1000
                                let currentSize = r[0].data.dbSize
                                if (currentMemory < minMemory) {
                                    minMemory = currentMemory
                                }
                                if (currentMemory > maxMemory) {
                                    maxMemory = currentMemory
                                }
                                if (currentSize < minSize) {
                                    minSize = currentSize
                                }
                                if (currentSize > maxSize) {
                                    maxSize = currentSize
                                }
                                let time = moment().format('hh:mm:ss')
                                this.memory.data.push(currentMemory)
                                this.memory.xdata.push(time)
                                this.key.data.push(currentSize)
                                this.key.xdata.push(time)
                                if (this.memory.data.length >= 6) {
                                    this.memory.data.shift()
                                    this.memory.xdata.shift()
                                }
                                if (this.key.data.length >= 6) {
                                    this.key.data.shift()
                                    this.key.xdata.shift()
                                }
                                this.$refs.memoryInfo.updateSeries([
                                    {
                                        name: '内存(kb)',
                                        data: this.memory.data.slice()
                                    }
                                ])
                                this.$refs.memoryInfo.updateOptions({
                                    xaxis: {
                                        categories: this.memory.xdata.slice()
                                    },
                                    yaxis: {
                                        min: minMemory,
                                        max: maxMemory
                                    }
                                }, true, true)
                                this.$refs.keySize.updateSeries([
                                    {
                                        name: 'key数量',
                                        data: this.key.data.slice()
                                    }
                                ])
                                this.$refs.keySize.updateOptions({
                                    xaxis: {
                                        categories: this.key.xdata.slice()
                                    },
                                    yaxis: {
                                        min: minSize - 2,
                                        max: maxSize + 2
                                    }
                                }, true, true)
                                if (this.loading) {
                                    this.loading = false
                                }
                            }).catch((r) => {
                                console.error(r)
                                this.$message.error('获取Redis信息失败')
                                if (this.timer) {
                                    clearInterval(this.timer)
                                }
                            })
                        }
                    }, 3000)
                }
            })
        },
        methods: {
            viewNode(nodeId, host, port) {
                this.redisClusterNodeInfo.visiable = true;
                this.redisClusterNodeInfo.nodeId = nodeId;
                this.redisClusterNodeInfo.host = host;
                this.redisClusterNodeInfo.port = port;
                this.$refs.redisClusterNode.loadDatas(nodeId, host, port);
            },
            handleRedisClusterNodeInfoClose() {
                this.redisClusterNodeInfo.visiable = false;
                this.redisClusterNodeInfo.nodeId = "";
                this.redisClusterNodeInfo.host = "";
                this.redisClusterNodeInfo.port = 0;
            }
        }

    }
</script>
<style>

</style>
